<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" :width="1100" destroy-on-close @closed="$emit('closed')" align-center :close-on-click-modal="false" :close-on-press-escape="mode != 'show' ? false : true">
        <el-form :model="form" :rules="rules" :disabled="mode == 'show'" ref="dialogForm" label-width="150" label-position="right">
            <el-col :span="12">
                <el-form-item :label="$t('sale.client.code')" prop="customer_code">
                <el-input v-model="form.customer_code" :placeholder="$t('sale.client.code')" clearable></el-input>
                </el-form-item>
            </el-col>
            <el-row :gutter="1">
                <el-col :span="12">
                <el-form-item :label="$t('sale.client.name')" prop="customer_name">
                    <el-input v-model="form.customer_name" :placeholder="$t('sale.client.name')" clearable></el-input>
                </el-form-item>
                </el-col>
                <el-col :span="12">
                <el-form-item :label="$t('all.code')" prop="customer_num">
                    <el-input v-model="form.customer_num" :placeholder="$t('all.code')" clearable></el-input>
                </el-form-item>
                </el-col>
            </el-row>
            <el-col :span="24">
                <el-form-item :label="$t('sale.client.contacts')" prop="customer_detail">
                <sc-form-table ref="table" v-model="form.customer_detail" :addTemplate="addTemplate" :placeholder="$t('all.noData')" drag-sort height="250">
                    <el-table-column prop="contacts" :label="$t('sale.client.linkname')" align="center">
                    <template #default="scope">
                        <el-input v-model="scope.row.contacts" :placeholder="$t('all.enter')"></el-input>
                    </template>
                    </el-table-column>
                    <el-table-column prop="mobile" :label="$t('sale.client.phone')" align="center">
                    <template #default="scope">
                        <el-input v-model="scope.row.mobile" :placeholder="$t('all.enter')"></el-input>
                    </template>
                    </el-table-column>
                </sc-form-table>
                </el-form-item>
            </el-col>
            <el-row :gutter="1">
                <el-col :span="12">
                <el-form-item :label="$t('sale.client.address')" prop="address">
                    <el-input v-model="form.address" :placeholder="$t('all.enter')" clearable></el-input>
                </el-form-item>
                </el-col>
                <el-col :span="12">
                <el-form-item :label="$t('sale.client.source')" prop="source">
                    <el-select v-model="form.source" filterable style="width: 100%" :placeholder="$t('all.select')">
                    <el-option v-for="item in sourceList" :key="item.id" :label="item.source_name" :value="item.id"/>
                    </el-select>
                </el-form-item>
                </el-col>
            </el-row>
            <el-form-item :label="$t('all.attachment')" prop="enclosure">
                <sc-upload-file v-model="form.enclosure" :limit="1">
                <el-button type="primary" icon="el-icon-upload">{{$t('all.selectattachment')}}</el-button>
                </sc-upload-file>
            </el-form-item>
            <el-col :span="12">
                <el-form-item :label="$t('all.remark')" prop="remark">
                <el-input v-model="form.remark" :placeholder="$t('all.remark')" clearable type="textarea"></el-input>
                </el-form-item>
            </el-col>
        </el-form>
        <template #footer>
            <el-button @click="visible = false">{{$t('all.cancel')}}</el-button>
            <el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit()">{{$t('all.save')}}</el-button>
        </template>
    </el-dialog>
</template>

<script>
export default {
  emits: ['success', 'closed'],
    data() {
        return {
            mode: "add",
            titleMap: {
                add: this.$t('all.add'),
                edit: this.$t('all.edit'),
                show: this.$t('all.show')
            },
            visible: false,
            isSaveing: false,
            //表单数据
            form: {
                id: "",
                customer_code: "",
                customer_num: "",
                customer_name: "",
                address: "",
                source: "",
                collect_price: "",
                // advance_price: "",
                enclosure: "",
                remark: "",
                system_disable: "",
                customer_detail: []
            },
            //验证规则
            rules: {
                customer_code: [{required: true, message: this.$t('all.enter') + ' ' + this.$t('sale.client.code')}],
                customer_name: [{required: true, message: this.$t('all.enter') + ' ' + this.$t('sale.client.name')}],
                customer_detail: [{required: true, message: this.$t('all.enter') + ' ' + this.$t('sale.client.contacts')}],
            },
            addTemplate: {},
            sourceList: [],
        }
    },
    mounted() {
        this.getSource()
    },
    methods: {
        //显示
        open(mode = 'add') {
            this.mode = mode;
            this.visible = true;
            return this
        },
        //表单提交方法
        submit() {
            this.$refs.dialogForm.validate(async (valid) => {
                if (valid) {
                this.isSaveing = true;
                var res = [];
                if (this.form.id) {
                    res = await this.$API.client.client.edit.post(this.form);
                } else {
                    res = await this.$API.client.client.add.post(this.form);
                }
                this.isSaveing = false;
                if (res.code == 1) {
                    this.$emit('success', this.form, this.mode)
                    this.visible = false;
                    this.$message.success(this.$t('all.yes'))
                } else {
                    this.$alert(res.message,this.$t('all.prompt'), {type: "error"});
                }
                } else {
                return false;
                }
            })
        },
        getPid(data) {
            this.form.type_id = data
        },
        //表单注入数据
        async setData(data) {
            this.form.id = data.id
            var res = await this.$API.client.client.detail.get({id: data.id});
            console.log(res);
            this.form.customer_code = res.data.customer_code
            this.form.customer_num = res.data.customer_num
            this.form.customer_name = res.data.customer_name
            this.form.address = res.data.address
            this.form.source = Number(res.data.source)
            this.form.collect_price = res.data.collect_price
            // this.form.advance_price = res.data.advance_price
            this.form.enclosure = res.data.enclosure
            this.form.remark = res.data.remark
            this.form.system_disable = res.data.system_disable
            let array = []
            res.data.customer.map(item => {
                array.push({
                id: item.id,
                contacts: item.contacts,
                mobile: item.mobile,
                })
            })
            this.form.customer_detail = array
        },
        // 获取分类
        async getSource() {
            var res = await this.$API.client.source.all.get();
            this.sourceList = res.data
        },
        onFocus(event) {
            event.target.select();
        },
    }
}
</script>

<style></style>
